<template>
  <div>
    <p class="font-bold">第 {{ count }} 步：点击下载模版</p>
    <a
      @click.native="handleDownLoadTemplate"
      class="bg-gray-50 flex items-center justify-center rounded-md p-3 mt-2 cursor-pointer border border-gray-50 hover:border-gray-300"
    >
      <div class="text-[var(--main-color)] flex items-center gap-1">
        <i class="iconfont icon-download1"></i>下载模板
      </div>
    </a>
    <p class="my-4 font-bold">第 {{ count + 1 }} 步：按照模版要求填写</p>
    <p class="font-bold mb-2">第 {{ count + 2 }} 步：上传填写完成的文件</p>
    <el-upload
      ref="uploadRef"
      :auto-upload="false"
      :limit="1"
      :on-exceed="handleExceed"
      :on-change="handleUploadFile"
    >
      <template #trigger>
        <div
          class="w-[100%] flex items-center justify-center rounded-md p-3 mt-2 cursor-pointer border border-dashed border-[var(--main-color)]"
        >
          <div class="text-[var(--main-color)] flex items-center gap-1">
            <i class="iconfont icon-add"></i>上传文件
          </div>
        </div>
      </template>
    </el-upload>
  </div>
</template>
<script setup>
import { getImportUrl } from "@/api/public.js";
import { genFileId, ElMessage } from "element-plus";
import { readExcelToJson } from "@/utils/xlsx.js";
const props = defineProps({
  count: { type: Number, default: 1 }, //步骤
  type: { type: String, default: "" }, //下载模板type
  accept: { type: String, default: "" }, //上传文件类型
});

const { type } = toRefs(props);

const handleDownLoadTemplate = async () => {
  const { data } = (await getImportUrl({ type: type.value })) || {};
  const _url = data?.uri;
  if (_url) window.open(_url, "noopener", "noreferrer");
};
const uploadRef = ref();
const handleExceed = (files) => {
  uploadRef.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadRef.value.handleStart(file);
};
const fileList = ref(null);
const handleUploadFile = async (file) => {
  fileList.value = file;
};
const getFileList = async () => {
  let res = await readExcelToJson(fileList.value);
  return res;
};
const clearFiles = () => {
  fileList.value = null;
  uploadRef.value.clearFiles();
};
defineExpose({ getFileList, clearFiles });
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  width: 100%;
}
</style>
